import React from 'react';
import { Divider, Typography } from 'antd';
import './ShareLinks.css';

const { Title } = Typography;

const ShareLinks = ({ data }) => {
  // 添加颜色数组
  const backgroundColors = [
    'rgba(255, 255, 235, 0.3)',
    'rgba(245, 235, 59, 0.3)',
    'rgba(33, 150, 243, 0.3)',
    'rgba(223, 120, 123, 0.3)',
  ];
  const titleColors = ['#000000', '#000000', '#000000'];

  return (
    <div className='share-links-container'>
      {data.map(({ title, links }, index) => (
        <div
          key={title}
          className='section'>
          <Divider
            orientation='left'
            className='section-divider'>
            <Title
              level={3}
              className='section-title'
              style={{ color: titleColors[index % titleColors.length] }}>
              {title}
            </Title>
          </Divider>
          <div
            className='links-container'
            style={{
              backgroundColor:
                backgroundColors[index % backgroundColors.length],
            }}>
            {links.map(({ text, url }) => (
              <div
                key={url}
                className='link-wrapper'>
                <a
                  href={url}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='link'>
                  {text}
                </a>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ShareLinks;
